<template>
    <scroll-view class="content">
        <div style="display: flex; flex-direction: row; align-items: center; width: 100%">
            <div style="flex-grow: 1">
                <div style="width: 17px"></div>
                <uni-search-bar
                    v-model="q"
                    placeholder=""
                    :focus="true"
                    bg-color="#FFFFFF"
                    :cancel-button="false"
                    :radius="10"
                    @confirm="search"
                    @blur="blur"
                    @focus="true"
                    @input="input"
                    @cancel="cancel"
                    @clear="clear"
                >
                </uni-search-bar>
            </div>
            <img
                src="@/assets/coupon.png"
                style="width: 22px; height: 22px; padding-left: 20px"
                @click="toMyActivity"
            />
            <div style="width: 17px"></div>
        </div>
        <div style="padding-left: 17px; padding-right: 17px; padding-top: 5px">
            <div v-if="!q">
                <!-- 优惠券 -->
                <!-- <div style="display: flex; flex-direction: row; align-items: center">
                    <Coupon :name="'200减20劵'" :status="0"></Coupon>
                    <div style="width: 15px"></div>
                    <Coupon :name="'200减20劵'" :status="1"></Coupon>
                    <div style="flex-grow: 1"></div>
                    <div style="padding-right: 3px">
                        <text class="couponsCount">10个优惠</text>
                    </div>

                    <img class="icon" src="@/assets/ic-coupons-count.png" />
                </div> -->
                <!-- tabbar -->
                <div style="padding: 10px">
                    <TabBar :tabs="tabs" :index="tabIndex" :on-tap="onTapTabAt"></TabBar>
                </div>
            </div>
            <!--  活动列表 -->
            <div
                v-for="(item, index) in q ? searchResults : activities[tabIndex]"
                :key="index"
                style="padding-top: 10px; padding-bottom: 10px"
            >
                <div @click="toActivityDetail(item.id)">
                    <HomeActivityCard
                        :key="index"
                        :status="item.status"
                        :title="item.title"
                        :time="item.time"
                        :activity-mage="item.image"
                    ></HomeActivityCard>
                </div>
            </div>
        </div>
    </scroll-view>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineComponent } from 'vue'
import Coupon from '@/components/activity/coupon.vue'
import TabBar from '@/components/tab/tab-bar.vue'
import HomeActivityCard from '@/components/home/home-activity-card.vue'

const props = defineProps(['title', 'sub', 'moreLink'])
const tabIndex = ref(0)
const q = ref('')
const tabs = ['进行中', '已结束']
console.log('this.tabs', tabs)
function toActivityDetail(id) {
    uni.navigateTo({
        url: `/activityPages/activity/activity-detail?id=${id}`
    })
}
const searchResults = ref([
    {
        title: '捕鱼达人搜索结果',
        image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
        time: '2023-05-05',
        id: '113',
        status: 0
    },
    {
        title: '捕鱼达人11111111',
        image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
        time: '2023-05-05',
        id: '123213',
        status: 0
    }
])
const activities = ref([
    [
        {
            title: '捕鱼达人',
            image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
            time: '2023-05-05',
            id: '113',
            status: 0
        },
        {
            title: '捕鱼达人11111111',
            image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
            time: '2023-05-05',
            id: '123213',
            status: 0
        },
        {
            title: '捕鱼达人',
            image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
            time: '2023-05-05',
            id: '111313',
            status: 0
        },
        {
            title: '捕鱼达人11111111',
            image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
            time: '2023-05-05',
            id: '12321123333',
            status: 0
        }
    ],

    [
        {
            title: '开疆拓土',
            image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
            time: '2023-05-05',
            id: '113',
            status: 0
        },
        {
            title: '开疆拓土',
            image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
            time: '2023-05-05',
            id: '123213',
            status: 0
        },
        {
            title: '开疆拓土',
            image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
            time: '2023-05-05',
            id: '111313',
            status: 0
        },
        {
            title: '开疆拓土',
            image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
            time: '2023-05-05',
            id: '12321123333',
            status: 0
        }
    ]
])
function onTapTabAt(i) {
    tabIndex.value = i
}
function toMyActivity() {
    console.log('toMyActivity')
    uni.navigateTo({
        url: '/activityPages/activity/my-activity'
    })
}
</script>

<style scoped>
.content {
    background-color: rgba(245, 245, 245, 1);
}
.couponsCount {
    height: 20px;
    line-height: 20px;
    color: rgba(153, 153, 153, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}
.icon {
    width: 20px;
    height: 20px;
}
</style>
